<template>
	<view>
		<view style="height: 150rpx;"></view>
		<image src="/static/imags/login/logo.png" class="logoimg" mode="widthFix"></image>
		<text class="tip">未注册的账号验证通过后将自动注册</text>
		<view class="phone-box">
			<view @click="chooseArea" class="area">+86</view>
			<uni-easyinput :focus="true" class="input-box phone-input-box" type="number" :inputBorder="false"
				v-model="phone" maxlength="11" placeholder="请输入手机号" primaryColor="#ff0000" />
		</view>
		<view class="phone-box">
			<uni-easyinput type="number" class="input-box" :inputBorder="false" v-model="code" maxlength="6"
				:clearable="false" placeholder="请输入短信验证码">
			</uni-easyinput>
			<view class="short-code-btn" hover-class="hover" @click="start">
				<text class="inner-text" :class="reverseNumber==0?'inner-text-active':''">{{innerText}}</text>
			</view>
		</view>
		<view class="buttonbox">
			<view class="phonelogin" @tap="loginByUniverify"></view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<uni-agreements @setAgree="agree = $event"></uni-agreements>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		http
	} from "../../utils/service";

	function debounce(func, wait) {
		let timer;
		wait = wait || 500;
		return function() {
			let context = this;
			let args = arguments;
			if (timer) clearTimeout(timer);
			let callNow = !timer;
			timer = setTimeout(() => {
				timer = null;
			}, wait)
			if (callNow) func.apply(context, args);
		}
	}
	let weixinAuthService;
	export default {
		data() {
			return {
				"phone": "",
				"code": "",
				"agree": false,
				"inviteCode": false,
				"reverseNumber": 0,
				"count": 60,
				"reverseTimer": null,
			}
		},

		async onLoad() {
			var token = uni.getStorageSync('uni_id_token');
			var uid = uni.getStorageSync('uid');
			console.log("token: ", token);
			if (token && uid) {
				uni.reLaunch({
					url: '/pages/index/index?token=' + token + "&uid=" + uid,
				});
			}
		},
		computed: {
			innerText() {
				if (this.reverseNumber == 0) return "获取短信验证码";
				return "重新发送" + '(' + this.reverseNumber + 's)';
			}
		},
		created() {
			this.initClick();
		},
		methods: {
			initClick() {
				this.start = debounce(() => {
					if (this.reverseNumber != 0) return;
					this.sendMsg();
				})
			},
			loginByUniverify() {
				let reg_phone = /^1\d{10}$/;
				if (!this.phone) {
					uni.showToast({
						title: "请输入手机号码",
						icon: 'none'
					});
					return
				}

				if (!reg_phone.test(this.phone)) return uni.showToast({
					title: "手机号码格式错误",
					icon: 'none'
				});

				if (!this.code) {
					uni.showToast({
						title: "请输入短信验证码",
						icon: 'none'
					});
					return
				}

				if (!this.agree) {
					uni.showToast({
						title: "请先同意用户协议与隐私政策",
						icon: 'none',
					});
					return
				}

				http.post("/user/login", {
					"phone": this.phone,
					"captchaCode": this.code
				}).then(res => {
					console.log(res);
					if (res.code != 200) {
						uni.showToast({
							title: res.description,
							icon: 'none'
						});
						return
					}
					try {
						uni.setStorageSync('uni_id_token', res.data.token);
						uni.setStorageSync('uid', res.data.user.id);
						uni.reLaunch({
							url: '/pages/index/index?token=' + res.data
								.token + "&uid=" + res.data.user.id,
						});
					} catch (e) {}
				}).catch(e => {
					uni.showToast({
						title: "登录失败，请稍后重试",
						icon: 'none',
					});
				})
			},

			chooseArea() {
				uni.showToast({
					title: '暂不支持其他国家',
					icon: 'none'
				});
			},
			sendMsg() {
				let reg_phone = /^1\d{10}$/;
				if (!this.phone) {
					uni.showToast({
						title: "请输入手机号码",
						icon: 'none'
					});
					return
				}

				if (!reg_phone.test(this.phone)) return uni.showToast({
					title: "手机号码格式错误",
					icon: 'none'
				});

				if (!this.agree) {
					uni.showToast({
						title: "请先同意用户协议与隐私政策",
						icon: 'none',
					});
					return
				}
				http.get("/sms/code", {
					"params": {
						"phone": this.phone
					}
				}).then(res => {
					console.log(res);
					if (res.code != 200) {
						uni.showToast({
							title: res.description,
							icon: 'none'
						});
						return
					}
					uni.showToast({
						title: "短信验证码发送成功",
						icon: 'none'
					});
					this.reverseNumber = Number(this.count);
					this.getCode();
				}).catch(e => {
					console.log(JSON.stringify(e));
					uni.showToast({
						title: "获取验证码失败，请稍后重试",
						icon: 'none'
					});
				})
			},
			getCode() {
				if (this.reverseNumber == 0) {
					clearTimeout(this.reverseTimer);
					this.reverseTimer = null;
					return;
				}
				this.reverseNumber--;
				this.reverseTimer = setTimeout(() => {
					this.getCode();
				}, 1000)
			}
		}
	}
</script>

<style>
	page {
		background: radial-gradient(circle at 20px 20px, #DBE4FD 5px, #E5ECFD 0);
		background-size: 30px 30px;
	}

	.input-box {
		height: 44px;
		background-color: #F8F8F8 !important;
		border-radius: 0;
		font-size: 14px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
	}

	/* #ifdef H5 */
	.input-box ::v-deep {
		.uni-input-input[type="password"] {
			&::-ms-reveal {
				display: none;
			}
		}
	}

	/* #endif */

	.tip {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		color: #BDBDC0;
		font-size: 24rpx;
		margin-left: 12px;
	}


	/* #ifndef APP-NVUE */
	// 解决小程序端开启虚拟节点virtualHost引起的 class = input-box丢失的问题 [详情参考](https://uniapp.dcloud.net.cn/matter.html#%E5%90%84%E5%AE%B6%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AE%9E%E7%8E%B0%E6%9C%BA%E5%88%B6%E4%B8%8D%E5%90%8C-%E5%8F%AF%E8%83%BD%E5%AD%98%E5%9C%A8%E7%9A%84%E5%B9%B3%E5%8F%B0%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98)
	.uni-content ::v-deep .uni-easyinput__content,
	/* #endif */

	.uni-content ::v-deep .uni-forms-item__inner {
		padding-bottom: 8px;
	}

	.logoimg {
		width: 426rpx;
		height: 254rpx;
		display: block;
		margin: 0 auto;
	}

	.buttonbox {
		width: 100%;
		height: 87rpx;
		position: fixed;
		bottom: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.phonelogin {
		width: 218rpx;
		height: 87rpx;
		display: flex;
		background-image: url(../../static/imags/login/sjdl.png);
		background-size: cover;
	}

	.phone-box {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		margin: 24rpx;
	}

	.area {
		position: absolute;
		left: 10px;
		z-index: 9;
		top: 12px;
		font-size: 14px;
	}

	.area::after {
		content: "";
		border: 3px solid transparent;
		border-top-color: #000;
		top: 12px;
		left: 3px;
		position: relative;
	}

	/* #ifdef MP */
	// 解决小程序端开启虚拟节点virtualHost引起的 class = input-box丢失的问题 [详情参考](https://uniapp.dcloud.net.cn/matter.html#%E5%90%84%E5%AE%B6%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%AE%9E%E7%8E%B0%E6%9C%BA%E5%88%B6%E4%B8%8D%E5%90%8C-%E5%8F%AF%E8%83%BD%E5%AD%98%E5%9C%A8%E7%9A%84%E5%B9%B3%E5%8F%B0%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98)
	.phone-box ::v-deep .uni-easyinput__content,
	/* #endif */
	.phone-input-box {
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		flex: 1;
		padding-left: 45px;
		margin-bottom: 10px;
		border-radius: 0;
	}

	.short-code-btn {
		padding: 0;
		position: absolute;
		top: 0;
		right: 8px;
		width: 260rpx;
		max-width: 100px;
		height: 44px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;

	}

	.inner-text {
		font-size: 14px;
		color: #AAAAAA;
	}

	.inner-text-active {
		color: #04498c;
	}
</style>